<template>
  <div class="box">
    <!-- 顶部 -->
    <van-nav-bar title="手机号"
                 @click-left="$router.back(-1)">
      <template #left>
        <img class="icon_right"
             src="../../assets/img/down_left.png"
             alt="">
      </template>
    </van-nav-bar>
    <div class="info">
      <van-field label="原手机号"
                 disabled
                 v-model.trim="user.old_mobile"
                 placeholder="请输入手机号" />
      <van-field v-model="user.old_captcha"
                 center
                 clearable
                 label="验证码"
                 placeholder="请输入验证码">
        <template #button>
          <Code :mobile="user.old_mobile"></Code>
        </template>
      </van-field>
      <van-field label="新手机号"
                 v-model.trim="user.mobile"
                 placeholder="请输入手机号" />
      <van-field v-model="user.captcha"
                 center
                 clearable
                 label="验证码"
                 placeholder="请输入验证码">
        <template #button>
          <Code :mobile="user.mobile"></Code>
        </template>
      </van-field>
      <button class="btn"
              @click="confirm">确认修改</button>
    </div>
  </div>
</template>
<script>
import Code from './compontents/Code.vue'
import { changemobile } from '@/api/login'
export default {
  components: { Code },
  data () {
    return {
      user: {
        old_mobile: '',
        old_captcha: '',
        mobile: '',
        captcha: ''
      }
    }
  },
  mounted () {
    this.user.old_mobile = this.$route.query.mobile
  },
  methods: {
    async confirm () {
      if (!this.user.old_mobile) return this.$toast.fail('原手机号不能为空')
      if (!this.user.mobile) return this.$toast.fail('新手机号不能为空')
      if (!this.user.old_captcha) return this.$toast.fail('短信验证码不能为空')
      if (!this.user.captcha) return this.$toast.fail('短信验证码不能为空')
      const { code, msg } = await changemobile(this.user)
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success('修改手机号成功')
      setTimeout(() => {
        this.$router.back()
      }, 1500)
    }
  }
}
</script>
<style scoped lang='less'>
//  顶部导航
.icon_right {
  width: 12px;
  height: 21px;
  vertical-align: middle;
}
.box {
  width: 100%;
  height: 100%;
  background: #f7f8fa;
  overflow: hidden;
  padding-top: 40px;
  .info {
    width: 100%;
    margin-top: 8px;
    /deep/.van-cell {
      line-height: 34px;
      margin-bottom: 6px;
    }
    /deep/.van-cell__title {
      width: 75px;
      font-weight: 600;
    }
  }
}

.btn {
  width: 80%;
  height: 48px;
  margin-top: 40px;
  background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
  box-shadow: 0px 8px 20px rgba(29, 90, 255, 0.32);
  border-radius: 37px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  line-height: 22px;
  border: none;
  margin-left: 10%;
  color: #ffffff;
}
</style>
